<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				height: 300px;
				width: 600px;
				border: 4px outset #00AE5F;
				font-size: 30px;
				color: white;
				margin: 4px;
			}
		</style>
		<script>
			function chgColor(){
				var cr=["red","blue","green","pink","gray","yellow","white"];
				document.body.bgColor=cr[Math.floor(Math.random()*cr.length)];
			}
			function chgNeirong(){
				var d1=document.getElementById("d1");
				//alert(d1.innerHTML);//innerText
				d1.innerHTML="周琪是我们班第二帅哥";
			}
			function changeDiv(){
				//ar是数组
				var ar=document.getElementsByTagName("div");
				for(let d of ar){
					//d.innerHTML="<h1>我们班林瑞最帅</h1>";
					d.innerText="<h1>我们班林瑞最帅</h1>";
				}
			}
			function selectAll(){
				var dr=document.getElementsByName("product");
				for(let i in dr){
					dr[i].checked=true;//"checked"
				}
			}
			function getSelNum(){
				 var ar=document.getElementsByName("product");
				 
				  let c=0;
				  for(let b of ar){
					  if(b.checked)
						c++;
				  }
				  /* for (var b=0;b<ar.length;b++){
				      if(ar[b].checked==true){
				          c++;
				      }
				  } */         
				 alert(c);        
			}
		</script>
	</head>
	<body bgcolor="red">
		<div id="d1">
		</div>
		<div id="d2"></div>
		<div id="d1"></div>
		<h1>双11采购</h1>
		<p>
			<input type="checkbox" name="product" value="boeing747" />波音747客机
			<br />
			<input type="checkbox" name="product" value="dayaozi" />英国皇家特供大腰子
			<br />
			<input type="checkbox" name="product" value="mazalati" />马萨拉蒂
			<br />
			<input type="checkbox" name="product" value="汤臣一品顶层豪宅" />汤臣一品顶层豪宅客机
			<br />
		</p>
		<input type="button" value="变色" onclick="chgColor()" />
		<input type="button" value="改变内容" onclick="chgNeirong()" />
		<input type="button" value="改变三个div的内容" onclick="changeDiv()" />

		<input type="button" value="全选" onclick="selectAll()" />
		<input type="button" value="统计选中个数" onclick="getSelNum()" />
	</body>
</html>
